<template>
  <div class="box">
    <div class="box-header">
      <div class="box-header-user">
        <el-avatar
          shape="square"
          :size="40"
          :src="form.avatar"
          @error="
            () => {
              return true;
            }
          "
          >{{ form.createBy }}</el-avatar
        >
        <div class="box-header-name">{{ form.createBy }}提交的周报</div>
      </div>
      <div class="box-header-time">
        提交时间：<span style="color: black">{{ form.submitTime }}</span>
      </div>
    </div>
    <div class="box-body">
      <div>
        <div class="box-body-label">姓名</div>
        <div class="box-body-value">{{ form.createBy }}</div>
        <van-divider />
      </div>
      <div>
        <div class="box-body-label">本周进度</div>
        <div class="box-body-value">{{ form.weeklyContent }}</div>
        <van-divider />
      </div>
      <van-divider>下周计划</van-divider>
      <div>
        <div class="box-body-label">周一</div>
        <div class="box-body-value">{{ form.day1 }}</div>
        <van-divider />
      </div>
      <div>
        <div class="box-body-label">周二</div>
        <div class="box-body-value">{{ form.day2 }}</div>
        <van-divider />
      </div>
      <div>
        <div class="box-body-label">周三</div>
        <div class="box-body-value">{{ form.day3 }}</div>
        <van-divider />
      </div>
      <div>
        <div class="box-body-label">周四</div>
        <div class="box-body-value">{{ form.day4 }}</div>
        <van-divider />
      </div>
      <div>
        <div class="box-body-label">周五</div>
        <div class="box-body-value">{{ form.day5 }}</div>
        <van-divider />
      </div>
      <div>
        <div class="box-body-label">周六</div>
        <div class="box-body-value">{{ form.day6 }}</div>
        <van-divider />
      </div>
      <div>
        <div class="box-body-label">周日</div>
        <div class="box-body-value">{{ form.day7 }}</div>
        <van-divider />
      </div>
      <div>
        <div class="box-body-label">分享人</div>
        <el-select
          v-model="form.shareList"
          disabled
          filterable
          clearable
          multiple
          placeholder="请选择分享人列表"
          style="width: 100%"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="box-footer">
      <div style="font-size: large; font-weight: 600; padding: 15px 10px;">阅读记录</div>
      <div style="padding: 0px 10px;">
        <el-timeline>
          <el-timeline-item
            placement="top"
            v-for="user in userReadList"
            :key="user.userId"
          >
            <div class="timeline-box">
              <el-avatar
                shape="square"
                :size="45"
                :src="user.avatar"
                @error="
                  () => {
                    return true;
                  }
                "
                >{{ user.userName }}</el-avatar
              >
              <div class="timeline-font-box">
                <div class="timeline-font-user-box">
                  {{ user.userName }}
                  <span class="timeline-font-time-box">{{
                    user.readTime
                  }}</span>
                </div>
                <div
                  style="color: red; font-weight: 700"
                  v-if="user.status === '0'"
                >
                  未读
                </div>
                <div style="color: #66bc5c; font-weight: 700" v-else>已读</div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import { getWeekly } from "@/api/erp/weekly";
import { getErpWeeklyRecordList } from "@/api/erp/weeklyRecord";
import { getUserListByStatus } from "@/api/system/user";
export default {
  name: "weeklyDetailsDrawer",
  data() {
    return {
      form: {},
      userReadList: [],
      userList: [],
    };
  },
  created() {
    let weeklyId = this.$route.params.weeklyId;
    this.getWeekly(weeklyId);
    this.getErpWeeklyRecordList(weeklyId);
    this.getUserListByStatus();
  },
  methods: {
    getUserListByStatus() {
      getUserListByStatus({ status: "0" }).then((res) => {
        this.userList = res.data;
      });
    },
    getErpWeeklyRecordList(weeklyId) {
      getErpWeeklyRecordList({ weeklyId: weeklyId }).then((res) => {
        this.userReadList = res.data;
      });
    },
    getWeekly(weeklyId) {
      getWeekly(weeklyId).then((res) => {
        this.form = res.data;
        this.form.shareList = res.data.shareList ? res.data.shareList.split(",") : null;
      });
    },
  },
};
</script>

<style scoped>
.box {
  background-color: #f2f3f5;
}

.box-header {
  padding: 20px 10px;
  background-color: white;
}

.box-header-time {
  margin-top: 10px;
  font-size: 16px;
  color: rgba(31, 56, 88, 0.6);
}

.box-header-user {
  display: flex;
  align-items: center;
}

.box-header-name {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 600;
}

.box-body {
  margin-top: 10px;
  padding: 20px 10px;
  background-color: white;
}

.box-body-label {
  font-size: 14px;
  color: gray;
  margin-bottom: 10px;
}

.box-body-value {
  font-size: 18px;
}

.box-footer {
  margin-top: 10px;
  background-color: white;
}

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border: none;
  color: #000;
  cursor: not-allowed;
}

::v-deep .el-select__tags {
  margin-left: -7px;
}

::v-deep .el-timeline-item__wrapper{
  padding-left: 10px;
}

.timeline-box {
  display: flex;
  margin-left: 20px;
}

.timeline-font-box {
  display: grid;
  margin-left: 10px;
}

.timeline-font-user-box {
  font-size: initial;
  font-weight: 800;
}

.timeline-font-time-box {
  font-size: small;
  color: rgba(31, 56, 88, 0.6);
  font-weight: 600;
  margin-left: 5px;
}
</style>